<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import HotBookList from "./HotBookList.vue";

let sectionList = ref([]);
let currentTab = ref("");

onMounted(async () => {
  const res = await axios.get("/api/sections");
  if (res.data.code === 200 && res.data.data.length > 0) {
    sectionList.value = res.data.data;
    currentTab.value = sectionList.value[0].sec_name;
  }
});
</script>

<template>
  <!--主编推荐 本周精选  新书速递  读者热评  -->
  <div class="hotBookWrap" id="recommend">
    <div class="hotbookinner clearfix">
      <div class="hotBook">
        <div class="tabTit">
          <a
            v-for="section in sectionList"
            :key="section.sec_id"
            @click="currentTab = section.sec_name"
            :class="{ cur: currentTab === section.sec_name }"
            >{{ section.sec_name }}</a
          >
        </div>
        <HotBookList :currentTab="currentTab"></HotBookList>
      </div>
      <img
        src="../assets/bw.jpg"
        alt=""
        style="width: 20%; margin-left: 10px; margin: 50px 0 10px 10px"
      />
      
      <img
        src="https://ts1.cn.mm.bing.net/th/id/R-C.d0e9efdc05ad8bb6547b7663f81697fa?rik=ZB%2f3TF2SQU%2fpRA&riu=http%3a%2f%2fimg.51miz.com%2fTemplet%2f00%2f18%2f80%2f23%2f188023_1511453bf0052d90b373c6fbae9b6707.jpg!%2fquality%2f90%2funsharp%2ftrue%2fcompress%2ftrue%2ffw%2f840&ehk=FgkTKIWYARiVo6i%2fX1WlaZpPwmWexxzqTNZMoTjnU%2b8%3d&risl=&pid=ImgRaw&r=0"
        alt=""
        style="width: 20%; margin-left: 10px"
      />
    </div>
  </div>
</template>

<style scoped>
.hotBookWrap {
  position: relative;
  z-index: 6;
  top: 378px;
  left: 66px;
  width: 1200px;
  margin: auto;
}
.hotBookWrap .hotbookinner {
  margin: 10px 0 0 210px;
  width: 925px;
}
.clearfix {
  zoom: 1;
  display: block;
}
.hotBookWrap .hotBook {
  float: left;
  width: 730px;
  background: #eff2fa;
  padding: 10px;
  overflow: hidden;
}
.hotBook .tabTit {
  overflow: hidden;
}
.hotBook .tabTit a.cur {
  border-top: 3px solid #e60000;
  color: #e60000;
  background: #fff;
  font-weight: bold;
}
.hotBook .tabTit a {
  cursor: default;
  float: left;
  border-top: 3px solid #eff2fa;
  color: #333333;
  font-family: "Microsoft YaHei";
  font-size: 16px;
  height: 37px;
  line-height: 30px;
  padding: 0 25px;
  text-decoration: none;
}
</style>
